<template>
    <view>
        <uni-list v-if="step == 1">

            <uni-list-item
            direction ="row">
                <view class="titlelo" slot="header">所属客户 <text class="red">*</text></view>
                <view class="bodyc" slot="body">
                    <picker mode = "selector" :range="clientlist" range-key="label" @change="selclient">
                        <view style="display: flex;align-items: center;">
                            <text class="client_name">{{client_name || "请选择"}}</text>    &nbsp;&nbsp;&nbsp;&nbsp;<uni-icons type="bottom" size="18"></uni-icons>
                        </view>
                    </picker>
                </view>    
                
            </uni-list-item>
            <uni-list-item
            direction ="row">
                <view class="titlelo" slot="header">所属品牌 <text class="red">*</text></view>
                <view class="bodyc" slot="body">
                    <uni-easyinput
                    
                    class="inputc"
                     :inputBorder="false"
                    v-model="info.brand" placeholder="请输入"></uni-easyinput>
                    
             
                </view>    
                
            </uni-list-item>
        <!--    <uni-list-item
            direction ="row">
                <view class="titlelo" slot="header">品牌店铺 <text class="red">*</text></view>
                <view class="bodyc" slot="body">
                    <uni-easyinput
                    
                    class="inputc"
                     :inputBorder="false"
                    v-model="info.shop_name" placeholder="请输入"></uni-easyinput>
                    
             
                </view>    
                
            </uni-list-item> -->
            
            <uni-list-item direction ="row">
                <view class="titlelo" slot="header">订单编号 <text class="red"></text> </view>
                <view class="bodyc" slot="body">
                    <uni-easyinput 
                    
                    class="inputc"
                     :inputBorder="false"
                    v-model="info.order_sn" placeholder="不填自动生成"></uni-easyinput>
                </view>    
              
            </uni-list-item>
     
            <uni-list-item direction ="row">
                <view class="titlelo" slot="header">项目名称 <text class="red">*</text></view>
                <view class="bodyc" slot="body">
                    <uni-easyinput class="inputc"
                     :inputBorder="false"
                    v-model="info.project_name" placeholder="请输入内容"></uni-easyinput>
                </view>    
            </uni-list-item>
          
            <uni-list-item direction ="row">
                <view class="titlelo" slot="header">工程地址 <text class="red">*</text></view>
                <view class="bodyc" slot="body">
                    <uni-easyinput class="inputc"
                     :inputBorder="false"
                    v-model="info.address" placeholder="请输入内容"></uni-easyinput>
                </view>    
            </uni-list-item>
            <uni-list-item direction ="row">
                <view class="titlelo" slot="header">项目经理 <text class="red">*</text></view>
                <view class="bodyc" slot="body">
                    <uni-easyinput class="inputc"
                     :inputBorder="false"
                    v-model="info.username" placeholder="请输入内容"></uni-easyinput>
                </view>    
            </uni-list-item>
            <!-- phone -->
            <uni-list-item direction ="row">
                <view class="titlelo" slot="header">经理电话 <text class="red">*</text></view>
                <view class="bodyc" slot="body">
                    <uni-easyinput class="inputc"
                     :inputBorder="false"
                    v-model="info.phone" placeholder="请输入内容"></uni-easyinput>
                </view>    
            </uni-list-item>
            <uni-list-item direction ="row">
                <view class="titlelo" slot="header">监理电话 <text class="red">*</text></view>
                <view class="bodyc" slot="body">
                    <uni-easyinput class="inputc"
                     :inputBorder="false"
                    v-model="info.phone2" placeholder="请输入内容"></uni-easyinput>
                </view>    
            </uni-list-item>
            <uni-list-item direction ="row">
                <view class="titlelo" slot="header">结束日期 <text class="red">*</text></view>
                <view class="bodyc" slot="body">
                   
                    <uni-datetime-picker class="inputc" type="date" :clear-icon="false" v-model="info.be_endtime"  />
                </view>    
            </uni-list-item>
            <uni-list-item direction ="row">
                <view class="titlelo" slot="header">开工日期 <text class="red">*</text></view>
                <view class="bodyc" slot="body">
                    <uni-datetime-picker class="inputc" type="date" :clear-icon="false" v-model="info.work_time"  />
    
                </view>    
            </uni-list-item>
            <uni-list-item direction ="row">
                <view class="titlelo" slot="header">详细信息 <text class="red"></text></view>
                <view class="bodyc" slot="body">
                    <uni-easyinput 
                    type="textarea"
                    class="inputc"
                     :inputBorder="false"
                    v-model="info.content" placeholder="请输入内容"></uni-easyinput>
                </view>    
            </uni-list-item>
            <button type="primary" size="mini" @click="submit()">{{info.id?'提交修改':'提交下单'}}</button>
            <view style="height: 50rpx;">
                
            </view>
        </uni-list>
        <template v-else-if="step == 2">
            
            <view class="" style="height: 20rpx;">
                
            </view> 
            <button class="addorder" @click="showpop('buybox')" size="mini">添加采购</button>
            <view class="table">
                 <template>
                    <uni-card class="buyitem" v-for="(val,ind) in buylist">
                        <view slot="title">{{ind+1}}.</view>
                        <view class="content">
                             <view class="buycontent"><text>采购名称：</text><text>{{val.goods_name}}</text></view>
                             <view class="buycontent"><text>采购数量：</text><text>{{val.goods_num}}</text></view>
                             <view class="buycontent"><text>采购链接：</text><text>{{val.goods_url}}</text></view>
                        </view>
                        <view slot="actions" class="justify-between footers">
                            <view class="card-action">
                                <text class="text-edit" @click="editbuy('buybox',val,ind)">编辑</text>    
                                <text class="text-del" @click="delbuy(ind)">删除</text>
                            </view>
                        </view>
                    </uni-card>
 
                 </template>   
                 <view class="more" v-if="buylist.length<=0">请先添加采购需求~</view>
            </view>    
           
            <view class="btns">
                <button class="addorder"  @click="step = 1" size="mini">上一步</button>
                <button class="next-btn" type="primary" size="mini" @click="submit()">提交下单</button>
            </view>
                
        </template>
       
        
        
        
        
    </view>
</template>

<script>
    


var def_buy = {
    index:0,
    id:0,
    type:1,
    goods_name:'',
    goods_num:1,
    goods_url:''
}    
export default{
    data(){
        return{
            clientlist: [],
            shopslist:[],
            designerlist:[],
            client_name:"",
            shop_name:'',
            designer_name:"",
            type_name:'正单订单',
            info:{
                id:"",
                client_id:'',
                shop_id:'',
                order_sn:'',
                project_name:'',
                image:'',
                address:'',
                username:'',
                phone:'',
                phone2:'',
                be_endtime:'',
                work_time:'',
                total_progress:0,
                content:'',
                status:0
            },
            step:1,
    
            typelist:[
                {
                    label: '正单订单',
                    id: 1
                },
                {
                    label: '补单订单',
                    id: 2
                },
                {
                    label: '维修单',
                    id: 3
                }
            ]

      

           
        }
    },
    watch:{
        "step":function(newval,oldval){
            if(newval){
        
            }
        },
        'info.client_id':function(newvale,oldvale){
          // if(newvale){
          //   this.$api.get(`client/shoplist?uid=${this.info.client_id}`).then(({data})=>{
          //     this.shopslist = data
          //   })
          // }else{
          //   this.info.shop_id = null
          // }
        }
    },
    onLoad(option){
        if(option.oid){
            this.getdetails(option.oid)
        }
    },
    onShow(){
        this.getclientlist()
        this.getdesignerlist()
     
 
  
    },
    methods:{
        getdetails(id){
            this.$api.get(`project.order/details?id=${id}`).then(({data})=>{
                this.client_name = data.client_name
                this.shop_name = data.shop_name
               
                this.info = data.info
            })
        },

        getdesignerlist(){
            this.$api.get(`client/list`).then((res)=>{
                this.clientlist = res.data
            })
        },
        getclientlist(){
            this.$api.get(`client/designerlist`).then((res)=>{
                this.designerlist = res.data
            })
        },
        seltype(e){
            this.type_name = this.typelist[e.detail.value].label
            this.info.typec = this.typelist[e.detail.value].id
        },
        gotonext(step){
            switch(step){
                case 2:
                    if(!this.info.client_id || !this.info.order_sn || !this.info.project_name || !this.info.address || !this.info.username || !this.info.cycle){
                        this.$error("请完善表单")
                        return 
                    }
                    break;
                case 3:
                    if(this.buylist.length<=0){
                        this.$error('请添加采购需求')
                        return
                    }
                    break;
            }
            this.step = step
        },
        selclient(e){
            this.client_name = this.clientlist[e.detail.value].label
            this.info.client_id = this.clientlist[e.detail.value].id
        },
        selshop(e){
            this.shop_name = this.shopslist[e.detail.value].title
            this.info.shop_id = this.shopslist[e.detail.value].id  
        },
        setdesigner(e){
            this.designer_name = this.designerlist[e.detail.value].label
            this.info.designer = this.designerlist[e.detail.value].id
        },
        showpop(ref){
            if(ref == "buybox"){
                this.buyItem = JSON.parse(JSON.stringify(def_buy))
            }
        },

       
        submit(){
            
            this.$api.post(`project.order/submit`,{
                info:this.info
            }).then((res)=>{
                console.log('2',res)
                this.$success(res.message);
                setTimeout(function(){
                    uni.navigateBack()
                },1000)
                // 
            })
        }
    }
}    
</script>

<style lang="less">
    page{
        background-color: #fff;
        padding: 0 20rpx;
    }
    .titlelo{
        font-size: 26rpx;
        font-weight: bold;
        width: 150rpx;
        
    }
    .bodyc{
        width: 560rpx;
        display: flex;
        justify-content: end;
        font-size: 26rpx;
        align-items: center;
        .client_name{
            margin-right: 10rpx;
        }
        .inputc{
            text-align: right;
        }
        .tips{
            margin-left: 10rpx;
        }
    }
    .table{
       min-height: 300rpx;
    }
    .btns{
        display: flex;
        justify-content: center;
        .addorder{
            margin-right: 20rpx;
        }
    }
    .addorderbox{
        width: 680rpx;
        min-height: 550rpx;
        padding: 20rpx;
        border-radius: 10rpx;
        background-color: #fff;
    }
    .addpropbox{
        width: 680rpx;
        min-height: 550rpx;
        max-height: 930rpx;
        overflow-y: scroll;
        padding: 20rpx;
        border-radius: 10rpx;
        background-color: #fff;
    }
</style>